<template>
  <div class="bg" @scroll="onScroll">
    <Header />
    <div class="nav">
      <Breadcrumb separator=">>">
        <!-- 政策 -->
        <BreadcrumbItem v-if="!is" class="bread" to="/"><span style="color: #1f2224; font-weight: bold">{{
          $t("HOME")
        }}</span>
        </BreadcrumbItem>
        <BreadcrumbItem to="/result?back=1" v-if="!is"><span style="color: #1f2224; font-weight: bold">{{
          $t("SearchResult1")
        }}</span>

        </BreadcrumbItem>
        <BreadcrumbItem to="/thatperson/browsinghistory" v-if="is"><span style="color: #1f2224; font-weight: bold">
            <!-- {{
          $t("SearchResult1")
        }} -->
            浏览历史
          </span>
        </BreadcrumbItem>
        <BreadcrumbItem to="../policeInfo">
          <span>{{ $t("ViewPolicyDocument1") }}</span>
        </BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="Main">
      <div class="Main_top">
        <div class="Head_title">
          <div class="CN_title">{{ itemData.title }}</div>
          <div class="UK_title">
            {{ itemData.english_title }}
          </div>
        </div>
        <div class="Left_slider">
          <!-- Left Sidebar for Titles -->
          <div class="tab_list">
            <div class="tab_list_name" v-if="itemData.content !== null && itemData.content !== ''"
              :class="{ active: activeStep === 0 }" @click="scrollToSection(0)">
              <a style="font-size: 16px;">核心内容阐述</a>
            </div>
            <div class="tab_list_name" v-if="Gl_files.length > 0" :class="{ active: activeStep === 1 }"
              @click="scrollToSection(1)">
              <a style="font-size: 16px;">关联文件</a>
            </div>
            <div class="tab_list_name" v-if="itemData.applicability !== null && itemData.applicability !== ''"
              :class="{ active: activeStep === 2 }" @click="scrollToSection(2)">
              <a style="font-size: 16px;">适用条件</a>
            </div>
            <div class="tab_list_name" v-if="itemData.flow_info !== null && itemData.flow_info !== ''"
              :class="{ active: activeStep === 3 }" @click="scrollToSection(3)">
              <a style="font-size: 16px;">使用流程</a>
            </div>
            <!-- <div class="tab_list_name" v-if="DownImg.content_code !== null" :class="{ active: activeStep === 4 }"
              @click="scrollToSection(4)">
              <a style="font-size: 16px;">使用流程图</a>
            </div> -->
            <div class="tab_list_name" v-if="unscramble_data.length > 0" :class="{ active: activeStep === 5 }"
              @click="scrollToSection(5)">
              <a style="font-size: 16px;">政策解读</a>
            </div>
            <div class="tab_list_name" v-if="case_data.length > 0" :class="{ active: activeStep === 6 }"
              @click="scrollToSection(6)">
              <a style="font-size: 16px;">应用案例</a>
            </div>
            <div class="tab_list_name" :class="{ active: activeStep === 7 }" @click="scrollToSection(7)">
              <a style="font-size: 16px;">主责部门</a>
            </div>
          </div>
          <!-- Right Content Area -->
          <div class="right-content">
            <div class="expound right_sort" v-if="itemData.content !== null && itemData.content !== ''"
              :ref="(el) => (sections[0] = el)">
              <div class="sort_title">核心内容阐述</div>
              <div class="expoud_content">
                <div class="expound_CN" style="border-bottom: 1px solid #e7ebf6">
                  <div class="name"><span>中文阐述</span></div>
                  <div style="padding: 17px 19px; font-size: 16px">
                    {{ itemData.content }}
                  </div>
                </div>
                <div class="expound_UK">
                  <div class="name"><span>英文阐述</span></div>
                  <div style="padding: 17px 19px; font-size: 16px">
                    {{ itemData.english_abstract }}
                  </div>
                </div>
              </div>
            </div>
            <div class="Support right_sort" v-if="Gl_files.length > 0" :ref="(el) => (sections[1] = el)">
              <div class="sort_title">关联文件</div>
              <div class="Support_content">
                <div class="Support_list" v-for="item in Gl_files">
                  <span v-if="item.file_name !== null && item.file_name !== ''" class="dian">●</span>
                  <span>
                    <a v-if="item.file_name !== null && item.file_name !== ''"
                      style="text-decoration: underline;font-size: 16px;" @click="goQuery(item.original_id)"
                      :title="item.file_name">{{ item.file_name }}</a>
                  </span>
                </div>
              </div>
            </div>
            <div class="Conditions right_sort" v-if="itemData.applicability !== null && itemData.applicability !== ''"
              :ref="(el) => (sections[2] = el)">
              <div class="sort_title">适用条件</div>
              <div class="Conditions_content">
                <span>
                  <p style="font-size: 16px;">{{ itemData.applicability }}</p>
                </span>
              </div>
            </div>
            <div class="procedure right_sort" v-if="itemData.flow_info !== null && itemData.flow_info !== ''"
              :ref="(el) => (sections[3] = el)">
              <div class="sort_title">使用流程</div>
              <div class="procedure_content">
                <span v-html="itemData.flow_info"> </span>
              </div>
            </div>
            <div class="interpret right_sort" v-if="unscramble_data.length > 0" :ref="(el) => (sections[5] = el)">
              <div class="sort_title">政策解读</div>
              <div>
                <div class="interpret_content" v-for="items in unscramble_data">
                  <span class="dian">●</span>
                  <span class="Right-WenZi">
                    <a v-if="items[1]" style="text-decoration: underline;font-size: 16px;" :title="items[0]"
                      @click="goLink(items[1], '2', '1', true)">{{ items[0] }}</a>
                    <a v-else style="text-decoration: underline;font-size: 16px;" :title="items[0]"
                      @click="goLink(items[2], '2', '1', false)">{{ items[0] }}</a>
                  </span>
                </div>
              </div>
            </div>
            <div class="case right_sort" v-if="case_data.length > 0" :ref="(el) => (sections[6] = el)">
              <div class="sort_title">应用案例</div>
              <div class="case_content" v-for="items in case_data">
                <span class="dian">●</span>
                <span>
                  <a v-if="items[1]" style="text-decoration: underline;font-size: 16px;" :title="items[0]"
                    @click="goLink(items[1], '2', '2', true)">{{ items[0] }}</a>
                  <a v-else style="text-decoration: underline;font-size: 16px;" :title="items[0]"
                    @click="goLink(items[2], '2', '2', false)">{{ items[0] }}</a>
                </span>
              </div>
            </div>
            <div class="department right_sort" :ref="(el) => (sections[7] = el)">
              <div class="sort_title">主责部门</div>
              <div class="department_content">
                <div class="bottom_left dep">
                  <div>
                    <div class="dep1"><span style="font-size: 16px;">单位名称</span></div>
                    <div class="dep2">
                      <span style="font-size: 16px;" :title="department !== null ? department[3] : ''">{{
                        department !== null ? department[3] : ""
                      }}</span>
                    </div>
                  </div>
                  <div>
                    <div class="dep1"><span style="font-size: 16px;">责任处室</span></div>
                    <div class="dep2">
                      <span style="font-size: 16px;" :title="department !== null ? department[0] : ''">{{
                        department !== null ? department[0] : ""
                      }}</span>
                    </div>
                  </div>

                  <div>
                    <div class="dep1"><span style="font-size: 16px;">官方网站</span></div>
                    <div class="dep2">
                      <span style="font-size: 16px;" class="InterWeb" @click="InterWeb(department[2])"
                        :title="department !== null ? department[2] : ''">
                        {{ department !== null ? department[2] : "" }}</span>
                    </div>
                  </div>
                </div>

                <div class="bottom_right dep">
                  <div>
                    <div class="dep1"><span style="font-size: 16px;">办公地址</span></div>
                    <div class="dep2">
                      <span style="font-size: 16px;" :title="department !== null ? department[4] : ''">
                        {{ department !== null ? department[4] : "" }}</span>
                    </div>
                  </div>
                  <div>
                    <div class="dep1"><span style="font-size: 16px;">联系电话</span></div>
                    <div class="dep2">
                      <span style="font-size: 16px;" :title="department !== null ? department[6] : ''">
                        {{ department !== null ? department[6] : "" }}</span>
                    </div>
                  </div>

                  <div>
                    <div class="dep1"><span style="font-size: 16px;">电子邮件</span></div>
                    <div class="dep2">
                      <span style="font-size: 16px;" :title="department !== null ? department[7] : ''">
                        {{ department !== null ? department[7] : "" }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Right_fixed">
      <div @click="Handlingof" v-if="false">
        <img class="img1" src="../../assets/查看政策_slices/政策办理-n.png" alt="" />
        <span>事项办理</span>
      </div>
      <div @click="policydocument">
        <img class="img2" src="../../assets/查看政策_slices/咨询-n.png" alt="" />
        <span>咨询</span>
      </div>
      <div class="button-two" @click="toisshow">
        <img class="img3" src="../../assets/查看政策_slices/意见反馈-n.png" alt="" />
        <span>留言</span>
      </div>
    </div>
    <!-- 弹窗小眼睛 -->
    <Eye ref="editEyeRef" />
    <Policy ref="PolicyRef" :PolicyInfo="itemData" :state="FileType" />
    <Handlingofmatters ref="HandlingofmattersRef" />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
import { getDetailByCoreId } from "@/api/search";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import Eye from "./components/eye.vue";
import Policy from "./components/PolicyInquiry.vue";
import Handlingofmatters from "./components/Handlingofmatters.vue";
import Header from "@/components/Header.vue";
import { Mitt } from "@/utils/mitt";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const languagePreference =
  sessionStorage.getItem("language_preference") || "cn";
// 同步locale的初始值(页面刷新之后还是当前设置的语言)
locale.value = languagePreference;
const route = useRoute();
const router = useRouter();
const itemData = ref({});
const department = ref([]);
const FileType = ref(1); //区分政策和政策文件
const DownImg = ref({});
const editEyeRef = ref(false);
const PolicyRef = ref(false);
const HandlingofmattersRef = ref(false);
let is = route.query.is
console.log(is);
const policyMap = (imageData) => {
  if (imageData) {
    editEyeRef.value.state = true;
    editEyeRef.value.image = imageData;
  }
};

//政策事项弹窗
const Handlingof = () => {
  HandlingofmattersRef.value.state = true;
};
//政策咨询弹窗
const policydocument = () => {
  PolicyRef.value.state = true;
};
//下载图片
const downloadImage = (url) => {
  const link = document.createElement("a");
  link.href = url;
  link.download = new Date().getTime() + ".png"; // 下载后的文件名
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
const InterWeb = (url) => {
  if (url) {
    window.open(url, '_blank')
  }

}
const toisshow = () => {
  let phoneNumber = localStorage.getItem('phoneNumber');
  let userli = localStorage.getItem('userli');
  if (phoneNumber !== null || userli !== null) {
    router.push({
      path: "/liuyan",
      query: {
        isshow: "1",
        core_id: route.query.core_id
      },
    });
  } else {
    ElMessageBox.alert('为便于留言反馈，请先登录后使用留言功能', '温馨提示', {
      confirmButtonText: '去登录',
      callback: (action) => {
        if (action === 'confirm') { Mitt.emit('GoLogin') }
      },
    });
  }
};
const Gl_files = ref([]);//关联文件
const unscramble_data = ref([]);//解读
const case_data = ref([]);//案例
const routeParams = route.query;
if (routeParams.core_id) {
  getDetailByCoreId(routeParams.core_id).then((res) => {
    if (res.code == 200) {
      itemData.value = res.data;
      department.value = res.data.contact_info;
      let defaultValue = {
        "content_code": null,
        "file_name": "",
        "original_id": "None"
      };
      Gl_files.value = res.data.files;
      unscramble_data.value = res.data.unscramble_data;
      case_data.value = res.data.case_data;
      DownImg.value = (res.data.files.length > 0) ? res.data.files[0] : defaultValue;
    } else {
      ElMessage.error(res.msg);
    }
  });
}
const goQuery = (original_id) => {
  router.push({
    path: "/police",
    query: {
      original_id: original_id.toString(),
    },
  });
};
const goLink = (src, id, stutas, state) => {
  if (state == true) {
    window.open(src, "_blank");
  } else {
    router.push({
      path: "/Survey",
      query: {
        goLink_id: id, //判断是政策还是配套文件
        original_id: routeParams.core_id,
        stutas: stutas, //1是解读，2是案例
        content: src,
      },
    });
  }
};
const activeStep = ref(0);
const sections = ref([]);

const scrollToSection = (index) => {
  activeStep.value = index;
  sections.value[index].scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
};

const onScroll = (e) => {
  const scrollPosition = window.scrollY || window.pageYOffset; // 获取滚动位置
  let activeIndex = -1;
  sections.value.forEach((section, index) => {
    if (section && section instanceof HTMLElement) {
      if (e.target.scrollTop === 0) {
        activeIndex = 0;
        return;
      }
      const sectionRect = section.getBoundingClientRect(); // 获取元素位置
      const sectionBottom = sectionRect.top + sectionRect.height;
      // 判断滚动位置是否在section的顶部和底部之间或者是顶部刚露出可视窗口范围内
      const isScrollWithinSection = scrollPosition >= sectionRect.top && scrollPosition < sectionBottom;
      const isTopVisible = sectionRect.top >= 0 && sectionRect.top <= window.innerHeight;
      if (isScrollWithinSection || isTopVisible) {
        activeIndex = index;
      }
    }
  });

  // 高亮当前活跃session的索引
  activeStep.value = activeIndex;

};

</script>

<style lang="scss" scoped>
li {
  list-style: none;
}

.bg {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.nav {
  font-weight: bold;
  background: #ffffff;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #0a40f2;
  // height: 50px;
  line-height: 50px;
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.18);

  div {
    margin-left: 30px;
  }
}

:deep(.ivu-breadcrumb-item-link) {
  color: #00519f;
  font-size: 16px;
}

:deep(.ivu-breadcrumb-item-separator) {
  color: #1f2224;
}

.Main {
  display: flex;
  width: 100%;
  margin-top: 30px;

  .Main_top {
    width: 90%;
    background: #ffffff;
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin: 0 auto;
    padding-bottom: 60px;

    .Head_title {
      width: 100%;
      margin: 50px 0 0 24px;
      padding-right: 48px;

      .CN_title {
        font-size: 32px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #1f2224;
      }

      .UK_title {
        font-size: 24px;
        margin-top: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #1f2224;
      }
    }

    .Left_slider {
      width: 100%;
      height: 100%;
      display: flex;

      .tab_list {
        width: 15%;
        height: 25%;
        margin-top: 50px;
        border-right: 1px solid #e7ebf6;
        position: sticky;
        top: 0;

        .tab_list_name {
          width: 100%;
          font-family: Microsoft YaHei;
          font-weight: 300;
          margin: 63px 0 0 0;
          cursor: pointer;
          text-align: center;

          a {
            color: #7f878c;
          }
        }

        .active a {
          background: #e9f3ff;
          border-radius: 10px;
          font-size: 18px;
          padding: 20px 30px;
          font-weight: bold;
          color: #0978df;
        }
      }
    }
  }

  .right-content {
    .right_sort {
      margin-top: 50px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #1f2224;
    }

    width: 85%;
    height: 100%;
    margin: 0 1.875rem;
    overflow-y: auto;

    .sort_title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1f2224;
      padding: 17px 0 20px 21px;
      margin-bottom: 21px;
      background: linear-gradient(90deg, #e9f2ff 0%, #ffffff 100%);
      border-radius: 8px;
    }

    .expound {
      .expoud_content {
        border: 1px solid #e7ebf6;
        border-radius: 4px;

        .expound_CN,
        .expound_UK {
          display: flex;

          .name {
            min-width: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f1f3f7;
            font-size: 16px;
            font-weight: 400;
          }
        }
      }
    }

    .Support {
      .Support_list {
        margin-bottom: 20px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #0a40f2;

        .dian {
          margin-right: 10px;
        }
      }
    }

    .Conditions_content {
      span {
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #1f2224;
        line-height: 38px;
      }
    }

    .procedure_content {
      span {
        font-size: 16px;
      }
    }

    .procedure_Img_content {
      display: flex;

      .btn {
        margin-right: 17px;
        display: flex;
        font-size: 16px;
        width: 120px;
        height: 46px;
        justify-content: center;
        align-items: center;
        background: #e7f0fc;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1f2224;
      }
    }

    .interpret_content {
      margin-bottom: 20px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #0a40f2;

      .dian {
        margin-right: 10px;
      }
    }

    .case_content {
      margin-bottom: 20px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #0a40f2;

      .dian {
        margin-right: 10px;
      }
    }

    .department_content {
      display: flex;
      border: 1px solid #e7ebf6;
      border-radius: 4px;

      .dep {
        width: 50%;
      }

      .dep>div {
        display: flex;
        border-bottom: 1px solid #e7ebf6;
      }

      .dep1 {
        width: 20%;
        height: 50px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        background: #f1f3f7;
        color: #1f2224;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .dep2 {
        width: 80%;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #1f2224;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        span {
          display: inline-block;
          max-width: 100%;
          /* 设置最大宽度 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 超出部分用省略号表示 */
          white-space: nowrap;
          /* 防止文字换行 */
          padding: 0 19px;
        }

        .InterWeb {
          cursor: pointer;
          color: #2d8cf0;
        }
      }
    }
  }
}

.Right_fixed {
  position: fixed;
  right: 0;
  top: 390px;
  background: #ffffff;
  border-radius: 20px 0 0 20px;
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.18);

  div {
    width: 75px;
    height: 100px;
    padding-top: 15px;
    text-align: center;
    cursor: pointer;

    span {
      display: block;
      color: #000000;
    }
  }

  div:hover {
    span {
      color: #0a40f2;
    }

    .img1 {
      content: url("../../assets/查看政策_slices/政策办理-s.png");
    }

    .img2 {
      content: url("../../assets/查看政策_slices/咨询-s.png");
    }

    .img3 {
      content: url("../../assets/查看政策_slices/意见反馈-s.png");
    }
  }
}
</style>
